<template>
  <div>
    <el-dialog
      title="数据库结构信息"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <el-input type="textarea" rows="10" v-model="content"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit_content()">确 定</el-button>
      </span>
    </el-dialog>
    <el-row>
      <h1 align="left"><i class="el-icon-setting"></i>控制台</h1>
    </el-row>
    <hr>
    <el-row>
      <el-tooltip class="item" effect="dark" :content="'根据新增的请求或者未构建的模型进行构建'" placement="top">
        <el-button type="primary" plain @click="build_model()">构建文档</el-button>
      </el-tooltip>
      <el-button type="danger" plain @click="clean_model()">清理文档</el-button>
      <el-tooltip class="item" effect="dark" :content="'根据已经回答的问题更新模型'" placement="top">
        <el-button type="success" plain @click="update_model()">更新文档</el-button>
      </el-tooltip>
      <el-button type="warning" plain @click="dialogVisible = true">构建数据库</el-button>
      <el-tooltip class="item" effect="dark" :content="'当前有'+askCount+'个请求'" placement="top">
        <el-button type="success" plain @click="clean_asks()"> 清理请求 </el-button>
      </el-tooltip>
    </el-row>
    <el-row style="margin-top: 50px">
      <el-table :data="proxyTable" style="width: 100%">
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="status" label="状态"
                         width="100"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '开启' ? 'primary' : 'warning'"
              disable-transitions>{{scope.row.status}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope='scope'>
            <el-button @click="update_status(scope.row)">修改状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MyConsole',
  props: {},
  data() {
    return {
      proxyTable: [{ content: '记录请求', status: '开启', goal_state: 'listenAsk' },
        { content: '代理去重--请求参数', status: '开启', goal_state: 'use_data' },
        { content: '代理去重--返回结果', status: '开启', goal_state: 'use_result' },
        { content: '代理去重--请求头', status: '开启', goal_state: 'use_header' }],
      dialogVisible: false,
      content: '',
      askCount: 0,
    };
  },
  created() {
    axios.get('/api/proxy/state').then((res) => {
      this.proxyTable = res.data;
    });
    axios.get('/api/ask/count').then((res) => {
      this.askCount = res.data;
    });
  },

  methods: {
    update_status(row) {
      axios.get('/api/proxy/change_status', {
        params: {
          goal_state: row.goal_state,
        },
      }).then((response) => {
        row.status = response.data;
      });
    },
    clean_model() {
      const self = this;
      axios.get('/api/model/clean').then(() => { self.$store.state.data_iterable += 1; });
    },
    build_model() {
      axios.get('/api/model/build');
    },
    submit_content() {
      const formData = new FormData();
      const self = this;
      this.dialogVisible = false;
      formData.append('content', this.content);
      axios.post('/api/sql/build', formData).then(() => { self.$store.state.data_iterable += 1; });
    },
    update_model() {
      axios.get('/api/model/update');
    },
    clean_asks() {
      const self = this;
      this.$prompt('请输入每个模型保留的请求数量', '提交', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\d+/,
        inputErrorMessage: '请输入数字',
      }).then(({ value }) => {
        axios.get('/api/ask/clean', { params: { count: value } }).then((res) => {
          self.askCount = res.data;
        });
      });
    },
  },
};
</script>

<style lang="css" scoped>

</style>
